@font-face {
	font-family:MyCustomFont;
	src: url(../font/fzwbjw-webfont.eot);
}
@font-face {
	font-family:MyCustomFont;
	src: url(../font/FZWBJW.TTF);
}
.lingjiang {
	width: 50%;
	height: 500px;
	margin-top: 5.5%;
	margin-left: 26%;
}

.lingjiantai {
	width: 100%;
	height: 100%;
	background: url(../img/bgimg/choujiangtai.png) no-repeat center;
	/*background-position: 60% auto;*/
	/*margin-top: 7.5%;*/
	/*margin-top: -10%;*/
	/*margin-left: 26%;*/
}
#djsfont{
	color: #eee1a7;
	padding-left: 80px;
	font-size: 50px;
	font-family: MyCustomFont;
}
.yaoyiyao {
	width: 33%;
	height: 70%;
	margin-top: -10%;
	margin-left: 33.5%;
}

.champion {
	width: 15%;
	margin-left: 42.5%;
	height: 20%;
	/*color: #eee1a7;*/
	text-align: center;
	font-size: 20px;
	font-family: MyCustomFont;
}
.secondperson{
	width: 15%;
	margin-left: 23%;
	margin-top: -5%;
	height: 20%;
	/*color: #eee1a7;*/
	text-align: center;
	font-size: 20px;
	font-family: MyCustomFont;
}
.thirdperson{
	width: 15%;
	margin-left: 62.5%;
	margin-top: -10%;
	height: 20%;
	/*color: #eee1a7;*/
	text-align: center;
	font-size: 20px;
	font-family: MyCustomFont;
}
.personimg {
	display: inline-block;
	width: 100%;
	margin-top: 5%;
	border-radius: 50%;
	margin-bottom: 50%;
}

.otherperson {
	width: 100%;
	height: 30%;
	margin-top: -15%;
	font-family: MyCustomFont;
	/*margin-left: 5%;*/
}
.listyle {
	float: left;
	text-align: center;
	color: white;
	width: 9%;
	height: 100%;
	padding-left: 2%;
}
.listyle:first-child{
	float: left;
	text-align: center;
	color: white;
	width: 9%;
	height: 100%;
	padding-left: 0;
}
.listyle>img {
	width: 100%;
	border-radius: 50%;
	margin-bottom: 1%;
}


/*动图*/

.yaoyiyaodiv {
	background: url(../img/caidai.png) no-repeat center;
	width: 38%;
	height: 60%;
	margin-top: 3%;
	margin-left: 25%;
	background-size: 100%;
	padding-left: 12%;
}

.ybgdiv {
	background: url(../img/yuanbeijing.png) no-repeat center;
	width: 70%;
	height: 90%;
	background-size: 70%;
	/*margin: auto;*/
}

.shouimg {
	height: 230px;
	margin-top: 126px;
	margin-left: 120px;
	animation: music-move 1s 0s infinite alternate ease-in-out;
	-webkit-animation: music-move 1s 0s infinite alternate ease-in-out;
	transform-origin: bottom;
	-webkit-transform-origin: bottom;
}

.waiimg {
	position: absolute;
	height: 320px;
	margin-top: 46px;
	left: 637px;
	z-index: 999;
}

@keyframes music-move {
	0% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
	10% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	20% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
	30% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	40% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	60% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	70% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
	80% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	90% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
	100% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
}

@-webkit-keyframes music-move
/* Safari and Chrome */

{
	0% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
	10% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	20% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
	30% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	40% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	60% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	70% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
	80% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	90% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
	100% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
}


/*倒计时*/

svg {
	margin-top: -8%;
	margin-left: -5%;
	width: 50vmin;
}

g>text {
	text-anchor: middle;
	font-size: 400px;
	font-family: Overpass Mono, monospace;
	fill: hsl(210, 100%, 75%);
	opacity: 0;
	-webkit-animation-name: opac;
	animation-name: opac;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

g>text:nth-child(1) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

g>text:nth-child(2) {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

g>text:nth-child(3) {
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}

g>text:nth-child(4) {
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
}

g>text:nth-child(5) {
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
}

g>text:nth-child(6) {
	-webkit-animation-delay: 5s;
	animation-delay: 5s;
}

g>text:nth-child(7) {
	-webkit-animation-delay: 6s;
	animation-delay: 6s;
}

g>text:nth-child(8) {
	-webkit-animation-delay: 7s;
	animation-delay: 7s;
}

g>text:nth-child(9) {
	-webkit-animation-delay: 8s;
	animation-delay: 8s;
}

g>text:nth-child(10) {
	-webkit-animation-delay: 9s;
	animation-delay: 9s;
}


@-webkit-keyframes opac {
	0% {
		opacity: 0;
	}
	7.5% {
		opacity: 1;
	}
	10% {
		opacity: 1;
	}
	15% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes opac {
	0% {
		opacity: 0;
	}
	7.5% {
		opacity: 1;
	}
	10% {
		opacity: 1;
	}
	15% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}